<template>
  <div id="member-promotion-page" :style="{
    width:'100%',
    height: (this.getWinSize().height-50-this.getSafeArea().top)+'px',
    paddingTop:(this.getSafeArea().top+40)+'px'
  }">
    <div class="page-title page-title-white" :style="{
      top:(this.getSafeArea().top)+'px'
    }">
      <div id="back-button" @click="$router.push('/MemberHome')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>我的推广</span>
    </div>

    <div class="content-box" v-if="invitationCode && invitationCode.length>0">
      <div content="qr-box" style="padding-top: 30px;">
        <canvas ref="canvasId" id="canvasId" :style="{'width':qrCodeStyle.width, 'height':qrCodeStyle.height}"></canvas>
      </div>
      <div class="info-box">
        <div class="item">
          <div class="name">邀请码:</div>
          <div class="value">
            <span v-text="invitationCode"></span>
          </div>
          <div class="copy-button">
            <el-button type="success" size="mini" @click="copyClipBoard(invitationCode)">拷贝</el-button>
          </div>
          <div class="c"></div>
        </div>

        <div class="item">
          <div class="name">邀请链接:</div>
          <div class="value">
            <span class="ovd_s" style="display: inline-block;max-width: 90%;" v-text="invitationUrl"></span>
          </div>
          <div class="copy-button">
            <el-button type="success" size="mini" @click="copyClipBoard(invitationUrl)">拷贝</el-button>
          </div>
          <div class="c"></div>
        </div>
      </div>
    </div>

    <div class="client-type-box">
      <el-radio-group tab-position="center" v-model="clientType" style="margin-bottom: 30px;">
        <el-radio-button label="MEMBER">用户端</el-radio-button>
        <el-radio-button label="SHOP">商家端</el-radio-button>
      </el-radio-group>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcode'


export default {
  name: 'MemberPromotion',
  data:function () {
    return {
      qrCodeStyle:{
        width:180,
        height:180,
      },
      clientType:'MEMBER',
      invitationCode:'',
      invitationUrl:dict.H5_UrlMap['H5_MEMBER_REGISTER']+'?from=app&invitationCode=',
    }
  },
  watch:{
    clientType:function () {
      if (this.clientType==='MEMBER'){
        this.invitationUrl=dict.H5_UrlMap['H5_MEMBER_REGISTER']+'?from=app&invitationCode='+this.invitationCode
      }else{
        this.invitationUrl=dict.H5_UrlMap['H5_SHOP_REGISTER']+'?from=app&invitationCode='+this.invitationCode
      }
      this.setQr()
    }
  },
  mounted () {
    this.getInfo()
  },
  methods:{
    // 获取-个人信息
    getInfo: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'Member/info', {}, function (data) {
        $this.invitationCode=data.invitationCode
        $this.invitationUrl=dict.H5_UrlMap['H5_MEMBER_REGISTER']+'?from=app&invitationCode='+$this.invitationCode
        $this.setQr()
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
        // $this.form.password = ''
      })
    },

    setQr:function () {
      var qrData={
        event:"Register",
        url:this.invitationUrl
      }
      let $this=this
      setTimeout(function () {
        QRCode.toCanvas(
          $this.$refs.canvasId,
          $this.invitationUrl,
          { width:$this.qrCodeStyle.width, height:$this.qrCodeStyle.height, toSJISFunc: QRCode.toSJIS },
          error => {}
        );
      },500)
    }
  }
}
</script>

<style scoped>

</style>
